$(function () {



    // 0 定义一个全局变量  获取文章列表数据 的 参数 
    let Params = {
        // string	搜索关键词，可以为空，为空返回某类型所有文章
        key: "",
        // string	文章类型id，可以为空，为空返回所有类型文章
        type: "",
        // string	文章状态，草稿 ，已发布,为空返回所有状态文章
        state: "",
        // number	当前页，为空返回第1页
        page: 1,
        // number	每页显示条数，为空默认每页6条
        perpage: 10,
    }


    // 1 设置文章分类的下拉框

    function getCategorytList() {
        $.get('/admin/category/list', function (res) {
            // console.log(res);
            let html = "<option value=''>所有分类</option>";

            res.data.forEach(item => {
                html += `<option value="${item.id}" >${item.name}</option>`
            });

            $("#selCategory").html(html);
        })
    }


    // 2 获取文章列表
    function getArticleQuery() {

        $.get('/admin/article/query', Params, function (res) {
            // console.log(res);
            const list = res.data.data;
            const html = template("trTpl", { list });
            $("#mainTable tbody").html(html);

            // 获取总条数
            totalCount = res.data.totalCount;
            // 渲染分页组件
            renderPager();
        })
    }


    // 3 给筛选按钮设置点击事件
    $("#btnSearch").click(function () {

        // 重置页面 从第一页开始筛选
        Params.page = 1,

            // 获取表单的值

            Params.key = $("#aname").val().trim();
        // 获取输入框
        Params.type = $("#selCategory").val();
        //  获取下拉列表id  文章分类
        Params.state = $("#selStatus").val();
        // 获取下拉列表 状态 值

        // 发送请求

        getArticleQuery();
    })

    //  4 重置
    $("#btnReset").click(function () {

        // 重置页面 从第一页开始重置
        Params.page = 1,


            //  重置 表单 组件
            $("#aname").val('');
        $("#selCategory").val('');
        $("#selStatus").val('');

        // 重置接口的数据
        Params.key = ''
        Params.type = ''
        Params.state = ''

        getArticleQuery();
    })

    // 5 渲染分页组件
    function renderPager() {
        layui.laypage.render({
            elem: 'pager',
            count: totalCount, // 数据的总条数 
            limit: Params.perpage,
            curr: Params.page,

            jump(obj, first) {
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                // 被点击的页数
                if (!first) {
                    // 给全局参数赋值
                    Params.page = obj.curr;
                    // console.log(Params.page);

                    // 重新发送一次请求获取对应页码数据
                    getArticleQuery();
                    // 存在bug 每一次点击 页码都重新变回1  
                }
            }

        });

    }


    // 1 设置文章分类的下拉框
    getCategorytList()
    // 2 获取文章列表
    getArticleQuery();








    // 给删按钮设置点击事件
    $('#mainTable').on('click', '.delete', function () {
        // console.log(1);
        console.log(this);
        const id = $(this).data("id");
        // console.log(id);

        layer.confirm('不准删 😡', { title: '提示' }, function (index) {
            $.post('/admin/article/delete', { id }, function (res) {
                // console.log(res);
                layer.msg(res.msg)
                getArticleQuery()
            })
            // 关闭窗口
            layer.close(index);
        });
    })






})

